import React ,{Component}  from 'react'
import { SearchWrapper,Addation, Button, HeaderWrapper, Logo, Nav, Navitem,NavSearch, SearchInfo, SearchInfoTtile,SearchInfoItem,SearchInfoSwitch} from './style'
import { CSSTransition } from 'react-transition-group'
import { connect } from 'react-redux'
import {HeaderActionCreators} from './store'

class  Header extends Component
{
    
    render(){
        return (
            <HeaderWrapper>
                <Logo></Logo>
                <Nav>
                    <Navitem className='left active'>首页</Navitem>
                    <Navitem className='left'>下载App</Navitem>
                    <SearchWrapper>
                        <CSSTransition
                         in={this.props.isfocused}
                         timeout={200}
                         classNames="slide">
                            <NavSearch 
                            className={this.props.isfocused ? 'focused' : ''} 
                            onFocus={this.props.handlefocus}
                            onBlur = {this.props.handleBlur}></NavSearch>
                        </CSSTransition>
                        <i className={this.props.isfocused ? 'focused iconfont' : 'iconfont'} >&#xe610;</i>
                        {this.getSearchInfo(this.props.isfocused)}
                    
                    </SearchWrapper>
                   

                    <Navitem className='right'>
                        <i className='iconfont'>&#xe636;</i>
                    </Navitem>
                    <Navitem className='right'>登陆</Navitem>
                </Nav>

                
                <Addation>
                      
                      <Button className='write'>
                        <i className='iconfont'>&#xe6e5;</i>
                          写文章
                        </Button>
                      <Button className='reg'>注册</Button>
                  
                </Addation>
            </HeaderWrapper>
        )

    }
    getSearchInfo = (show) =>{
        if (show)
        {
            return (
                <SearchInfo>
                    <SearchInfoTtile>热门搜索
                        <SearchInfoSwitch>换一批</SearchInfoSwitch>
                    </SearchInfoTtile>
                    <div>
                        {
                            this.props.list.map((item)=>{
                                return (<SearchInfoItem key={item}>{item}</SearchInfoItem>)
                            })
                        }
                    </div>
                                
                </SearchInfo>
            )
        }
        else return null
    }
        
}

    



const mapStatetoProps = (state)=>{
    return {
        isfocused : state.getIn(['header','isfocused']),
        list : state.getIn(['header','list'])
    }
}

const mapDispatchtoProps = (dispatch) =>{
    return {
        handlefocus(){
            dispatch(HeaderActionCreators.getdatalist())
            dispatch(HeaderActionCreators.searchonFocus())
        },
        handleBlur(){
            dispatch(HeaderActionCreators.searchonBlur())
        }
    }
}




export default connect(mapStatetoProps,mapDispatchtoProps)(Header)